$(document).on("ready", function(){
    $("#modal-detail").dialog({
        autoOpen: false,
        draggable: false,
        modal: true,
        resizable: false,
        width:'600px',
        maxHeight:'600px',
        buttons: {
            Ok: function(){
                $(this).dialog( "close" );
            }
        }
    }).css("font-size", "12px");
    $("#row .btn_actions").on("click", "button[data-action='details']", function(){
        var params = {
                    "jobFlowId":$(this).data("id")
                };
        $.ajax({
              url: "/emr/getDescription.do",
              data: params
            }).done(function(data) {
                var msg="";
                for(info in data){
                    msg+= "<h4>Job Flow Description</h4>";
                    msg+= "<strong>Job flow name:</strong> "+data[info].jobFlowName+"<br />";
                    msg+= "<strong>Job flow status:</strong> "+data[info].jobFlowStatus+"<br />";
                    msg+= "<strong>DNS name:</strong> "+data[info].dnsName+"<br />";
                    msg+= "<strong>AMI Version:</strong> "+data[info].amiVersion+"<br />";
                    msg+= "<strong>Hadoop Version:</strong> "+data[info].hadoopVersion+"<br />";
                    msg+= "<strong>Number Of Instances:</strong> "+data[info].instanceNumber+"<br />";
                    msg+= "<strong>Master Type:</strong> "+data[info].masterType+"<br />";
                    if(data[info].slaveType !== null){
                        msg+= "<strong>Slave Type:</strong> "+data[info].slaveType+"<br /><br />";
                    }
                    msg+= "<legend></legend>";
                    msg+= "<h4>Step Description</h4>";
                    msg+= "<strong>Number of steps:</strong> "+data[info].numberOfSteps+"<br />";
                    for(step in data[info].steps){
                        msg+= "<strong>Step Name:</strong> "+data[info].steps[step].stepName+" - ";
                        msg+= "<strong>Status:</strong> "+data[info].steps[step].stepStatus+"<br />";
                    }
                }
                $("#modal-detail").dialog('option', 'title', 'Details for JobFlow '+params.jobFlowId);
                $("#modal-detail").find(".msg").html(msg);
                $("#modal-detail").dialog("open");        
            });
    });
    
    $("#row .btn_actions").on("click", "button[data-action='stop']", function(){
        var jobFlowId = $(this).data("id");
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:180,
            modal: true,
            draggable: false,
            buttons: {
                Confirm: function() {
                    $("#jobFlowId").val(jobFlowId);
                    $("#terminate").submit();
                    $( this ).dialog("close");
                },
                Cancel: function() {
                    $( this ).dialog("close");
                }
            }
        });
    });
    
});